<template>
  <div ref="baseOperationRef" class="base-operation">
    <div class="base-operation-btn" @click="baseOperationBtnClick">
      <el-button v-for="(item, index) in baseOptions" :key="'attribute-btn-' + index" :eventId="item.eventId">{{
      item.label }}</el-button>
      <EventLayout></EventLayout>
    </div>
    <div style="display: flex;margin: 1rem 0.5rem;">
      <el-select class="attribute-select" v-model="customSelect" placeholder="选择【亮灯、常亮、常灭、闪一闪、停闪、休眠】"
        @change="customSelectChange" style="margin-right: 0.5rem;">
        <el-option v-for="item in customOptions" :key="item.value" :label="item.label" :value="item" />
      </el-select>
      <el-button v-if="!isShowAdd" @click="addOptions(1)" style="width: 8rem;background-color: #0D33A6;color: #fff;">
        <el-icon>
          <AddLocation />
        </el-icon>
        自定义
      </el-button>
      <el-button v-else @click="addOptions(2)" style="width: 8rem;background-color: #0D33A6;color: #fff;">
        <el-icon>
          <Document />
        </el-icon>
        确认添加
      </el-button>
    </div>
    <div class="add-select-attribute" v-if="isShowAdd">
      <div class="add-select-item">
        <div class="item-label">操作ID</div>
        <el-input v-model="optinonItem.id" disabled></el-input>
      </div>
      <div class="add-select-item">
        <div class="item-label">操作名称</div>
        <el-input v-model="optinonItem.label" placeholder="请输入按钮名称(最多5个字符)" maxlength="5"
          @change="addOptions(2)"></el-input>
      </div>
      <div class="add-select-item">
        <div class="item-label">操作阈值</div>
        <el-input v-model="optinonItem.value" disabled></el-input>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Showroom3DStore } from "@/pinia/Showroom3D";
import EventLayout from '@/views/showroom3D/components/EventLayout.vue';
const s3Store = Showroom3DStore();


const optinonItem = ref({ id: '', label: '', value: 'CustomButton' })
const customSelect = ref([])
const isShowAdd = ref(false)

const baseOptions = computed(() => {
  if (s3Store.modelObj) {
    if (s3Store.modelObj.BaseOperation) {
      return s3Store.modelObj.BaseOperation
    }
    return []
  }
  return []
})

const customOptions = ref([
  { id: 101, label: '开灯', value: 'lightOn' },
  { id: 102, label: '关灯', value: 'lightOff' },
  { id: 103, label: '闪一闪', value: 'blink' },
  { id: 104, label: '关闭闪', value: 'stopBlink' },
  { id: 114, label: '常灭', value: '常灭' },
  { id: 113, label: '闪一闪', value: '闪一闪' },
  { id: 112, label: '停闪', value: '停闪' },
  { id: 111, label: '休眠', value: '休眠' }
])

const customSelectChange = (item) => {
  let isAdd = true
  baseOptions.value.forEach(el => {
    if (el.label === item.label) { isAdd = false }
  });
  isAdd ? baseOptions.value.push(item) : ElNotification({ title: '操作提示:', message: `【${item.label}】已存在`, type: 'success', duration: 3000 })
  customSelect.value = ''
}

const baseOperationBtnClick = (e) => {
  console.log('baseOperationBtnClick->', e);

}

const addOptions = (str) => {
  if (str === 1) {
    optinonItem.value = { id: '', label: '', value: 'CustomButton' }
    optinonItem.value.id = generateUUID()
    isShowAdd.value = true
  } else {
    if (optinonItem.value.label !== '') {
      isShowAdd.value = false
      baseOptions.value.push(optinonItem.value)
      ElNotification({ title: '操作提示:', message: `自定义操作【${optinonItem.value.label}】添加成功`, type: 'success', duration: 3000 })
    } else {
      ElNotification({ title: '操作提示:', message: `请添加自定操作名称`, type: 'success', duration: 3000 })
    }
  }
}
const attributeObj = ref({})
const baseOperationRef = ref(null)

const selectModel = computed(() => {
  if (s3Store.modelObj) {
    Object.keys(attributeObj.value).forEach(key => {
      attributeObj.value[key].val = s3Store.modelObj[key]
    })
  }
  return attributeObj.value
});

const saveOperation = () => {
  let arr = []
  s3Store.modelList.forEach(el => {
    if (el.modelId === s3Store.modelId) {
      el.BaseOperation = baseOptions.value
    }
    arr.push(el)
  })
  localStorage.setItem('CanvasBox-html-div', JSON.stringify(arr))
};

const generateUUID = () => {
  let d = new Date().getTime();
  let d2 = (performance && performance.now && (performance.now() * 1000)) || 0;
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    let r = Math.random() * 16;
    if (d > 0) {
      r = (d + r) % 16 | 0;
      d = Math.floor(d / 16);
    } else {
      r = (d2 + r) % 16 | 0;
      d2 = Math.floor(d2 / 16);
    }
    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
  });
}

defineExpose({ saveOperation });

</script>
<style lang="scss">
.base-operation {
  .base-operation-btn {
    margin-bottom: 1rem;
    min-height: 5rem;
    border-bottom: 1px solid #317aee;

    .el-button+.el-button {
      margin: 1rem;
    }

    .el-button {
      width: 8.88rem;
      margin: 1rem;
    }
  }

  .add-select-attribute {
    height: 10rem;
    margin-top: 1rem;

    .add-select-item {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      font-size: 1.2rem;
      color: #04f3f9;
      padding: 0.5rem 0rem;

      .el-input.is-disabled .el-input__wrapper {
        background-color: #424242;
        box-shadow: none;
      }

      .item-label {
        width: 6.66rem;
        font-size: 1.1rem;
        line-height: 2rem;
        margin-left: 0.5rem;
      }

      .item-value {}
    }
  }
}
</style>